<template>
    <div>
        <div class="right-body">
            <div class="operation-layout">
                <div class="operation-list">
                    <ul>

                        <li class="active">
                            <a>支付订单</a>
                            <div class="after"></div>
                        </li>

                    </ul>
                </div>
            </div>

            <!-- interaction begin -->
            <div class="pay-view-layout">
                <div class="pay-view-head">
                    <div class="pay-view-head-img">
                        <img :src="$imgPath(zfDetail.seller.headImg)">
                    </div>
                    <div class="pay-view-head-list">
                        <div>
                            <span>昵称  </span>
                            {{zfDetail.seller.nickname}}
                        </div>
                        <div>
                            <span>服务</span>
                            {{zfDetail.goods[0].goodsName}}
                        </div>
                        <div>
                            <span>时间</span>
                            {{$time3(zfDetail.useStartTime)}}-{{$time4(zfDetail.useEndTime)}}（{{zfDetail.goodsCount}}小时）
                        </div>
                    </div>
                    <div class="pay-view-head-h">
                        {{zfDetail.goods[0].goodsObj.price}}/{{zfDetail.goods[0].goodsObj.unit}}
                    </div>
                    <div class="pay-view-head-m">
                        ￥{{zfDetail.orderAmount}}
                    </div>
                    <div class="pay-view-head-sta">
                        <p>{{zfDetail.fm}}</p>
                        <p>等待付款</p>
                    </div>
                </div>

                <div class="pay-view-body clearfix">
                    <div class="Payment-name clearfix" style="display:block;width:100%;text-align:left;">
                        支付方式：
                    </div>
                    <div class="Payment-umb clearfix" style="height:70px;">
                        <a class="Pay-zfb" :class="[zhifuType == 0 ? 'active' : '']" @click="zfType(0)"><img src="../../assets/img/pay/Pay-zfb.png"></a>
                        <a class="Pay-wx" :class="[zhifuType == 1 ? 'active' : '']" @click="zfType(1)"><img src="../../assets/img/pay/Pay-wx.png"></a>
                    </div>
                    <div class="Payment-umb yue" style="display:block">
                        <img v-if="isYe" src="../../assets/img/pay/radiao-icon.png" alt="" @click="isYe = !isYe">
                        <img v-else src="../../assets/img/Request-Service/ServicesAvailable-radio.png" width="22" alt="" @click="isYe = !isYe">
                        <span>使用余额</span><span>（账户当前余额：{{moneyObj.recharge}}元）</span>
                        <router-link tag="span" :to="{name:'topUp',query:{tabIndex:'1'}}">充值</router-link>
                    </div>
                </div>
                <div class="pay-view-bottom">
                    需付金额：
                    <span>￥{{zfDetail.orderAmount}}</span>
                </div>
                <div class="pay-view-bt">
                    <a @click="servicePay()">立即支付</a>
                </div>
            </div>
            <Modal
                v-model="ewmBox"
                :closable="false" :footer-hide="true" width="210" class-name="vertical-center-modal">
                <canvas ref="canvas"></canvas>
            </Modal>
        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
import QRCode from 'qrcode'
export default {
    props:['zfDetail','moneyObj'],
    data(){
        return{
            zhifuType:-1,
            isYe:true,
            formZFB:'',
            ewmBox:false,       // 微信支付二维码弹框
        }
    },
    methods:{
        // 支付选择
        zfType(index){
            if(index == 0 && this.zhifuType == -1){
                this.zhifuType = 0
            }else if(index == 1 && this.zhifuType == -1){
                this.zhifuType = 1
            }else if(index == 0 && this.zhifuType == 0){
                this.zhifuType = -1
            }else if(index == 1 && this.zhifuType == 0){
                this.zhifuType = 1
            }else if(index == 1 && this.zhifuType == 1){
                this.zhifuType = -1
            }else if(index == 0 && this.zhifuType == 1){
                this.zhifuType = 0
            }
        },
        // 立即支付
        servicePay(){
            let payType = '',returnUrl = ''
            if(this.zhifuType == 0){
                payType = 11
                returnUrl = `http://${location.host}/center?leftIndex=0`
            }else{
                payType = 4
            }
            let parmes = {
                orderId:this.zfDetail.id,
                payType:payType,
                autoCost:this.isYe,
                returnUrl:returnUrl
            }
            apiHttp.apiDetail.payforOrderafter(parmes,resp=>{
                if(resp.code == '200') {
                    if(payType == 11){
                        if(resp.data != null){
                            this.formZFB = resp.data
                            const div = document.createElement('div')
                            div.innerHTML = this.formZFB
                            document.body.appendChild(div)
                            document.forms[0].submit()
                        }else{
                            this.$Message.success('支付成功')
                            this.$emit('listIsGoPay',false)
                        }
                    }else if(payType == 4){
                        if(resp.data != null){
                            this.qrcode(resp.data)
                        }else{
                            this.$Message.success('支付成功')
                            this.$emit('listIsGoPay',false)
                        }
                    }else{
                        this.$Message.success('支付成功')
                        this.$emit('listIsGoPay',false)
                    }
                }else{
                    this.$Message.warning(resp.message)
                }
            })
        },
        // 微信支付生成二维码
        qrcode(data) {
            let self = this
            let opts = {
                errorCorrectionLevel: 'H',
                type: 'image/jpeg',
                rendererOpts: {
                    quality: 0.3
                }
            }
            QRCode.toCanvas(this.$refs.canvas,data.url, opts,(err, url)=> {
                if (err){
                    console.log(err)
                }
            })
            this.wxZfSuccess = setInterval(()=>{
                self.orderVerify(data.orderId)
            },3000)
            this.ewmBox = true
        },
    }
}
</script>
<style scoped>
.yue{
    margin-top: 20px;
    font-size: 14px;
    width: 100%;
    height: 30px;
    line-height: 30px;
}
.yue img{
    margin-top: 4px;
    float: left;
    margin-right: 10px;
}
.yue span{
    line-height: 30px;
}
.yue span:nth-child(3){
    margin-left: 10px;
    color: #D84E4D;
}
.yue span:nth-child(4){
    margin-left: 10px;
    color: #fff;
    background-color: #D84E4D;
    border-radius: 30px;
    padding: 4px 12px;
}
</style>

